body {
  background-color: #F5F5F5;
  height: 100%;
  width: 100%;
}
html {
  font-size: 20px;
}
* {
  margin: 0;
  padding: 0;
}
p {
  padding: 0;
  margin: 0;
}
a {
  display: block;
}
.dis-in-b {
  display: inline-block;
}
ul {
  list-style: none;
}
/*flex布局*/
/*隐藏滚动条*/
.scrollbar {
  width: 100%;
  overflow: scroll;
  overflow-x: hidden;
}
.scrollbar::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.flex {
  display: flex;
  /*垂直居中*/
}
.flex.col-center {
  align-items: center;
}
.flex.row-left {
  justify-content: flex-start;
}
.flex.row-right {
  justify-content: flex-end;
}
.flex.column {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.flex.item,
.flex > .item {
  position: relative !important;
}
.flex.item.one,
.flex > .item.one {
  flex: 1 !important;
}
.flex.item.two,
.flex > .item.two {
  flex: 2 !important;
}
.flex.item.three,
.flex > .item.three {
  flex: 3 !important;
}
.flex.item.four,
.flex > .item.four {
  flex: 4 !important;
}
.flex.item.five,
.flex > .item.five {
  flex: 5 !important;
}
/*折行布局*/
.flex-wrap {
  flex-wrap: wrap;
}
.min-width {
  min-width: 200px;
}
.left-bar {
  width: 5.5rem;
  /*margin-right: .2rem;*/
  background-color: #f4f4f4;
}
.left-bar ul {
  width: 100%;
}
.left-bar ul li a:link,
.left-bar ul li a:visited,
.left-bar ul li a:hover,
.left-bar ul li a:active {
  color: #3d4145;
}
.left-bar ul li a {
  padding: .5rem.25rem;
  font-size: .7rem;
  border-bottom: 1px solid #ddd;
}
.left-bar ul li a:visited,
.left-bar ul li a:active {
  background-color: #fff;
}
.left-bar ul li a.active {
  background-color: #FFF;
}
.left-bar ul li i {
  font-style: normal;
  font-size: .7rem;
  display: inline-block;
  height: 1.2rem;
  width: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  margin-right: 5px;
}
.main-content {
  background-color: #f3f3f3;
}
.bar {
  position: relative;
}
.bar .title {
  background-color: #0894ec !important;
  color: #fff;
}
.bar .icon {
  color: #fff;
}
/*公用背景色*/
.bg-primary {
  background-color: #66A6D1 !important;
}
.bg-waring {
  background-color: #ff8408 !important;
}
.bg-info {
  background-color: #a34cff !important;
}
.bg-deep-info {
  background-color: #9933CC !important;
}
.bg-green {
  background-color: #390 !important;
}
.bg-light-green {
  background-color: #97D176 !important;
}
.bg-pink {
  background-color: #FFCCFF !important;
}
.bg-gray {
  background-color: #797979 !important;
}
.bg-light {
  background-color: #E9E9E9 !important;
}
.bg-white {
  background-color: #fff !important;
}
.bg-blue-light {
  background-color: #DEEDF2 !important;
}
/*公用字体颜色*/
.c-red {
  color: #cd6a6a !important;
}
.c-green {
  color: #18A689 !important;
}
.c-blue {
  color: #00A2D9 !important;
}
.c-purple {
  color: #B57EE0 !important;
}
/*公用字体大小*/
.f-14 {
  font-size: .7rem !important;
}
.f-16 {
  font-size: .8rem !important;
}
.f-18 {
  font-size: .9rem !important;
}
.f-20 {
  font-size: 1rem !important;
}
.f-22 {
  font-size: 1.1rem !important;
}
.f-24 {
  font-size: 1.2rem !important;
}
.border-b {
  border-bottom: 1px solid #eee;
}
.border-no {
  border: none !important;
}
.p-l-15 {
  padding-left: 15px !important;
}
.p-10 {
  padding: 10px !important;
}
.p-t-0 {
  padding-top: 0 !important;
}
.p-r-15 {
  padding-right: 15px !important;
}
.m-t-10 {
  margin-top: 10px !important;
}
.m-b-10 {
  margin-bottom: 10px !important;
}
.m-0 {
  margin: 0 !important;
}
.m-t-0 {
  margin-top: 0 !important;
}
.m-t-15 {
  margin-top: 15px !important;
}
.m-l-15 {
  margin-left: 15px !important;
}
.m-r-15 {
  margin-right: 15px !important;
}
.m-b-15 {
  margin-bottom: 15px !important;
}
.m-b-0 {
  margin-bottom: 0 !important;
}
.p-15 {
  padding: 15px !important;
}
.p-b-0 {
  padding-bottom: 0 !important;
}
.m-15 {
  margin: 15px !important;
}
.p-5 {
  padding: 5px !important;
}
.t-center {
  text-align: center !important;
}
/*按钮区*/
.h-btns {
  border-bottom: 1px solid #eee;
  padding: 10px 5px;
}
.h-btns .button {
  display: inline-block;
  margin-right: 5px;
  color: inherit;
}
.h-btns .button.button-fill {
  color: #fff;
}
/*筛选区*/
.screen {
  position: relative;
  background-color: #fff;
}
.screen .searchbar {
  padding: .5rem .25rem;
}
.screen .screen-item {
  font-size: .75rem;
  padding: .5rem .25rem;
}
.screen .screen-item .button {
  display: inline-block;
  margin-right: .2rem;
  color: inherit;
}
.screen .screen-item .button.button-fill {
  color: #fff;
}
.screen .screen-item input.date {
  width: 4.5rem;
}
.screen .screen-item input {
  font-size: .6rem !important;
  height: 1.4rem !important;
  width: 8rem;
  line-height: 1;
  padding: 5px 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: .15rem;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #555;
}
.screen .screen-btns .button {
  color: inherit;
  display: inline-block;
  margin-bottom: .5rem;
}
.screen .screen-btns .button.button-fill {
  color: #fff;
}
.screen .screen-btns .button.active {
  color: #fff;
  background-color: #0894ec;
  border-color: #0894ec;
}
.screen .times {
  margin-right: .2rem;
  margin-bottom: .5rem;
}
.screen .times input.date {
  height: 1.35rem !important;
}
.screen .screen-end {
  text-align: center;
}
.screen .screen-end .op-btn {
  display: inline-block;
  padding: 0 15px;
  font-size: .65rem;
}
.screen .screen-end .op-btn .icon {
  margin-right: .25rem;
  position: relative;
  color: #9b9b9b;
}
